<script setup lang="ts">
import LEchart from '@l-ui/components/echart';
import { shallowRef, onMounted } from 'vue';
import type { ECharts, EChartsOption } from 'echarts';
import type { EchartInstance } from '@l-ui/components/echart';
const chartRef = shallowRef<EchartInstance>();
onMounted(() => {
  renderChart();
});

const chartLoad = (chart: ECharts) => {
  console.log('已经成功加载chartId:' + chart.getId());
};

const renderChart = () => {
  const chart = chartRef.value!.getChart()!;

  /* 获取数据，假数据 */
  const option: EChartsOption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
      },
    ],
  };
  chart.setOption(option);
};
</script>

<template>
  <l-echart
    ref="chartRef"
    @chartLoad="chartLoad"
    style="width: 600px; height: 600px"
  ></l-echart>
</template>
